<template>
  <div>
    <page-container title="文章分类">
      <template #extra>
        <el-button type="primary" @click="addHandler">添加分类</el-button>
      </template>
      <template #form>
        <el-table
          border
          v-loading="Loading"
          :data="tableData"
          stripe
          :default-sort="{ prop: 'date', order: 'descending' }"
          :header-cell-style="{
            'text-align': 'center',
            'background-color': '#415845',
            color: '#fff'
          }"
          :cell-style="{ 'text-align': 'center' }"
          style="width: 100%">
          <el-table-column label="序号" type="index" width="280">
          </el-table-column>
          <el-table-column
            prop="cate_name"
            sortable
            label="分类名称"
            width="280" />
          <el-table-column prop="cate_alias" sortable label="分类别名" />
          <el-table-column label="操作">
            <template #default="{ row, $index }">
              <el-button
                plain
                type="primary"
                :icon="Edit"
                circle
                @click="editHandler(row, $index)">
              </el-button>
              <el-button
                plain
                type="danger"
                :icon="Delete"
                circle
                @click="delHandlerDialog(row)">
              </el-button>
              <!-- <el-popconfirm
                width="220"
                confirm-button-text="确定"
                cancel-button-text="取消"
                :icon="InfoFilled"
                icon-color="#626AEF"
                title="确定删除该文章吗?"
                @confirm="delHandler(row, $index)">
                <template #reference>
                  <el-button plain type="danger" :icon="Delete" circle>
                  </el-button>
                </template>
              </el-popconfirm> -->
            </template>
          </el-table-column>
          <template #empty>
            <el-empty description="暂无数据" />
          </template>
        </el-table>
        <addDialog ref="dialog" @refresh="getCateList"></addDialog>
      </template>
    </page-container>
    <!-- {{ $filters.formatTaskName('12345678910') }} -->
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { cateListApi } from '../../api/article';
import { Delete, Edit } from '@element-plus/icons-vue';
import addDialog from '@/views/article/components/addDialog.vue';
import { delCateApi } from '../../api/article.js';
let Loading = ref(false);
let tableData = ref([]);
const dialog = ref();

const getCateList = async () => {
  Loading.value = true;
  const res = await cateListApi();
  tableData.value = res.data;
  Loading.value = false;
};
onMounted(() => {
  getCateList();
});
function addHandler({}) {
  dialog.value.open({});
}
function editHandler(row, index) {
  dialog.value.open(row);
}
// 对话框删除
const delHandlerDialog = (row, index) => {
  ElMessageBox.confirm('您确定要删除该文章分类吗?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const res = await delCateApi(row.id);
      if (res.code === 0) {
        ElMessage.success(res.message);
        getCateList();
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      });
    });
};
</script>
<style lang="less" scoped>
:deep(.el-table tr) {
  height: 50px !important;
}
</style>
